<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .view {
            width: 1300px;
            height: 270px;
            margin: 100px auto;
            position: relative;
        }
        ul {
            width: 100%;
            height: 100%;
            list-style-type: none;
            transform: rotate3d(1,0,0,0deg);
            /* 保留子元素的3d效果 */
            transform-style: preserve-3d;
            /* transform-origin: 50% 50% 135px; */
        }
        ul > li{
            width: 20%;
            height: 100%;
            background-color: #ccc;
            float: left;
            position: relative;
            transform-style: preserve-3d; 
            /* 添加过渡效果 */
            transition: transform 1s;
            transform-origin: 50% 50% 135px;
        }
        ul > li > span {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            
        }
        ul > li > span:nth-of-type(1) {
            background: url("img/1.png");
            transform: translateZ(270px);
        }
        ul > li > span:nth-of-type(2) {
            background: url("img/2.png");
            transform: translate3d(0,135px,135px) rotateX(-90deg);
        }
        ul > li > span:nth-of-type(3) {
            background: url("img/3.png");
            transform: rotateX(180deg);
        }  
        ul > li > span:nth-of-type(4) {
            background: url("img/4.png");
            transform: translate3d(0,-135px,135px) rotateX(90deg);
        } 
        /* 设置每隔li元素的背景图片位置 */
        ul > li:nth-of-type(2) > span {
            background-position: -100% 0;
        }
        ul > li:nth-of-type(3) > span {
            background-position: -200% 0;
        }
        ul > li:nth-of-type(4) > span {
            background-position: -300% 0;
        }
        ul > li:nth-of-type(5) > span {
            background-position: -400% 0;
        }
        /* 跳转按钮 */
        .view > a {
            text-decoration: none;
            display: block;
            width: 40px;
            height: 50px;
            background-color: rgba(0, 0, 0, .2);
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
        }
        .view > a:first-of-type {
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        } 
        .view > a:last-of-type {
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
        } 
    </style>
</head>
<body> 
    <div class="view">
        <ul>
            <!-- 5个环(每个环4个面) 组成一个大环 -->
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </li>
            <li>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </li>
            <li>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </li>
            <li>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </li>
        </ul>
        <a href="javascript:;" class="pre">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
    </div>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
              // 定义图片的索引
              var index= 0; 
              // 添加节流阀  true说明本次单击会有响应处理
              var flag = true;
            $(".next").on("click",function(){
                if (flag == true) {
                    // 设置节流阀
                    flag = false;
                    index--;  
                    $("li").each(function(key,value){
                    // 通过transform样式进行旋转
                    $(this).css({
                        "transform":"rotateX("+(index*-90)+"deg)",
                        // li之间延迟播放
                        "transition-delay":(key*0.2)+"s"
                        });
                    }); 
                    setTimeout(function(){
                        flag = true;
                    },1700) 
                }
            });
        });
    </script>
</body>
</html>